<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单type</title>
    <style>
        body {
            background: url("img/bg.png");
            text-align: center;
        }
    </style>
</head>
<body>
<form action="#" method="get" autocomplete="off">
    <!--标签-->
    <label for="username">用户名:</label>
    <!--文本字段-->
    <input type="text" name="username" id="username"> <br/>

    <label for="password">密码</label>
    <!--密码-->
    <input type="password" id="password" name="password"><br/>

    <label for="email">邮箱</label>
    <!--邮箱-->
    <input type="email" id="email" name="name"><br/>

    <label for="gander">性别</label>
    <!--单选框-->
    <input type="radio" id="gander" name="gander" value="男">男
    <input type="radio"  name="gander" value="女">女<br/>

    <label for="hobby">爱好:</label>
    <!--复选框-->
    <input type="checkbox" id="hobby" name="hobby" value="game">玩游戏
    <input type="checkbox" name="hobby" value="TV">看电视
    <input type="checkbox" name="hobby" value="sleep">睡觉<br/>
    <label for="date">日期</label>
    <!--日期-->
    <input type="date" id="date"name="name"><br/>

    <label for="time">时间</label>
    <!--日期-->
    <input type="time" name="time" id="time"><br/>

    <label for="birthday">出生日期</label>
    <!--输入日期-->
    <input type="datetime-local" id="birthday" name="birthday"><br/>

    <label for="number">浮点数</label>
    <!--浮点数-->
    <input type="number" id="number" name="number"><br/>
    <label for="search">可删除文本</label>
    <!--可删除文本-->
    <input type="search" name="search" id="search"><br/>

    <label for="age">年龄</label>
    <!--number-->
    <input type="number" id="age" name="age"><br/>



    <label for="file">文件上传</label>
    <!--文件上传-->
    <input type="file" id="file" name="file"><br/>

    <label for="range">心情值</label>
    <!--输入不精确的数值-->
    <input type="range" name="range" id="range" min="1" max="8" step="1"><br/>

    <label for="hidden">隐藏域</label>
    <!--隐藏域-->
    <input type="hidden" id="hidden" name="hidden" value="hidden"><br/>


    <label for="tel">电话号码</label>
    <!--电话号码-->
    <input type="tel" id="tel" name="tel"><br/>

    <label for="url">个人网址</label>
    <!--网址-->
    <input type="url" id="url" name="url"><br/>

    <label for="city">城市</label>
    <!--下拉菜单-->
    <select name="city" id="city">
        <option>--请选择一个城市--</option>
        <optgroup label="直辖市">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
        </optgroup>
        <optgroup label="省会">
            <option value="太原">太原</option>
            <option value="西安">西安</option>
            <option value="沈阳">沈阳</option>
            <option value="大连">大连</option>
            <option value="杭州">杭州</option>
        </optgroup>
    </select><br/>

    <label for="abstract">个人简介</label>
    <!--纯文本编辑控件-->
    <textarea id="abstract" name="textarea" rows="10" cols="20"></textarea><br/>




    <!--提交-->
    <button type="submit">确认</button>
     <!--重置-->
    <button type="reset">重置</button>



</form>
</body>
</html>